<template>
  <div>
    <h1>Home</h1>
    <!-- 相当于a标签-->


	<!-- <hr />
	 <button @click="goDog">跳转dog</button>
	  <button @click="goCat">跳转cat</button>

    <hr />
      <i class="el-icon-loading"></i>
      <i class="el-icon-share"></i>
      <i class="el-icon-delete"></i>

 <el-button type="primary" @click="sendLogin">主要按钮</el-button>
  <el-button type="success">成功按钮</el-button>
  <el-button type="info">信息按钮</el-button>
  <el-button type="warning">警告按钮</el-button>
  <el-button type="danger">危险按钮</el-button> -->
  <el-row :gutter="20">



    <!-- <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
    <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
    <el-col :span="6"><div class="grid-content bg-purple"></div></el-col> -->
    <el-col :span="6"><div class="grid-content bg-purple"><router-link to="/cat">开户</router-link></div></el-col>
    <el-col :span="6"><div class="grid-content bg-purple"><router-link to="/dog">转账</router-link></div></el-col>
    <el-col :span="6"><div class="grid-content bg-purple"><router-link to="/pig">存钱</router-link></div></el-col>
    <el-col :span="6"><div class="grid-content bg-purple"><router-link to="/bear">取钱</router-link></div></el-col>
  </el-row>
    </div>
</template>

<script>

  export default{
    name:"Home",
	methods:{
		goDog(){
			this.$router.push("/dog");
		},
		goCat(){
			this.$router.push("/cat");
		},
		sendLogin(){
			this.$axios.post("/login");
		}
	}
  }
</script>

<style>

  .el-row {
      margin-bottom: 20px;
      &:last-child {
        margin-bottom: 0;
      }
    }
    .el-col {
      border-radius: 4px;
    }
    .bg-purple-dark {
      background: #99a9bf;
    }
    .bg-purple {
      background: #d3dce6;
    }
    .bg-purple-light {
      background: #e5e9f2;
    }
    .grid-content {
      border-radius: 4px;
      min-height: 36px;
    }
    .row-bg {
      padding: 10px 0;
      background-color: #f9fafc;
    }
</style>
